<div class="tab-receiver toolbar_fixed_bottom">
    <div class="content_wrapper">
        <div class="tab_title" i18n="tabReceiver"></div>
        <div class="cf_doc_version_bt">
            <a id="button-documentation" href="https://github.com/betaflight/betaflight/releases" target="_blank" rel="noopener noreferrer"></a>
        </div>
        <div class="note">
            <p i18n="receiverHelp"></p>
        </div>
        <div class="grid-row">
            <div class="grid-col col6 bars">
                <div class="gui_box grey tunings topspacer">
                    <table class="pid_titlebar">
                        <thead>
                        <tr>
                            <th i18n="receiverModelPreview"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="model_preview_cell">
                                <div class="model_preview background_paper">
                                    <canvas id="canvas"></canvas>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="grid-col col6">
                <!-- RECEIVER -->
                <div class="receiver">
                    <div class="gui_box receiver grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationReceiver"></div>
                        </div>
                        <div class="spacer_box">
                            <select class="features rxMode" name="rxMode">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationReceiverMode"></span>
                        </div>
                        <div class="serialRXBox spacer_box">
                            <div class="note">
                                <p i18n="configurationSerialRXHelp"></p>
                            </div>
                            <select class="serialRX">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationSerialRX"></span>
                        </div>
                        <div class="spiRxBox spacer_box">
                            <div class="note">
                                <p i18n="configurationSpiRxHelp"></p>
                            </div>
                            <select class="spiRx">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationSpiRX"></span>
                        </div>
                    </div>
                </div>

                <!-- RSSI -->
                <div class="rssi">
                    <div class="gui_box grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationRSSI"></div>
                            <div class="helpicon cf_tip" i18n_title="configurationRSSIHelp"></div>
                        </div>
                        <div class="spacer_box">
                            <table>
                                <thead>
                                <tr>
                                    <th scope="rssi" i18n="configurationFeatureEnabled"></th>
                                    <th scope="rssi" i18n="configurationFeatureDescription"></th>
                                    <th scope="rssi" i18n="configurationFeatureName"></th>
                                </tr>
                                </thead>
                                <tbody class="features rssi">
                                <!-- table generated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- RSSI CHANNEL-->

                <div class="rssi_channel_wrapper grey">
                    <div class="head" i18n="receiverRssiChannel"></div>
                    <select name="rssi_channel">
                        <!-- list generated here -->
                    </select>
                </div>
                <div class="rcmap_wrapper grey">
                    <div class="head">
                        <span i18n="receiverChannelMap" i18n_title="receiverChannelMapTitle"></span>
                    </div>
                    <div class="hybrid_element">
                        <input type="text" name="rcmap" spellcheck="false" />
                        <select class="hybrid_helper"
                                name="rcmap_helper">
                            <option i18n="receiverChannelDefaultOption" value="AETR1234"></option>
                            <option value="AETR1234">FrSky / Futaba / Hitec</option>
                            <option value="TAER1234">Spektrum / Graupner / JR</option>
                        </select>
                    </div>
                </div>
                <div class="gui_box tunings grey">
                    <table class="sticks">
                        <tr>
                            <th i18n="receiverStickMin"></th>
                            <th i18n="receiverStickCenter"></th>
                            <th i18n="receiverStickMax"></th>
                        </tr>
                        <tr>
                            <td>
                                <div class="input-helpicon-flex">
                                    <input type="number" name="stick_min" min="1000" max="1200"/>
                                    <div class="helpicon cf_tip" i18n_title="receiverHelpStickMin"></div>
                                </div>
                            </td>
                            <td>
                                <div class="input-helpicon-flex">
                                    <input type="number" name="stick_center" min="1401" max="1599"/>
                                    <div class="helpicon cf_tip" i18n_title="receiverHelpStickCenter"></div>
                                </div>
                            </td>
                            <td>
                                <div class="input-helpicon-flex">
                                    <input type="number" name="stick_max" min="1800" max="2000"/>
                                    <div class="helpicon cf_tip" i18n_title="receiverHelpStickMax"></div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="gui_box tunings grey">
                    <table class="deadband">
                        <tr>
                            <th i18n="receiverDeadband"></th>
                            <th i18n="receiverYawDeadband"></th>
                            <th i18n="recevier3dDeadbandThrottle"></th>
                        </tr>
                        <tr>
                            <td>
                                <div class="input-helpicon-flex">
                                    <input type="number" name="deadband" step="1" min="0" max="32"/>
                                    <div class="helpicon cf_tip" i18n_title="receiverHelpDeadband"></div>
                                </div>
                            </td>
                            <td>
                                <div class="input-helpicon-flex">
                                    <input type="number" name="yaw_deadband" step="1" min="0" max="100"/>
                                    <div class="helpicon cf_tip" i18n_title="receiverHelpYawDeadband"></div>
                                </div>
                            </td>
                            <td>
                                <div class="input-helpicon-flex">
                                    <input type="number" name="3ddeadbandthrottle" step="1" min="0" max="100"/>
                                    <div class="helpicon cf_tip" i18n_title="receiverHelp3dDeadbandThrottle"></div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="gui_box grey tunings topspacer rcSmoothing">
                    <table class="rcSmoothing-table">
                        <tr>
                            <th colspan="3" i18n="receiverRcSmoothing"></th>
                        </tr>
                        <tr class="rc-smoothing-type">
                            <td>
                                <select name="rcSmoothing-select">
                                    <option class="rcSmoothingOff" value="0" i18n="receiverRcSmoothingInterpolation"></option>
                                    <option class="rcSmoothingOn" value="1" i18n="receiverRcSmoothingFilter"></option>
                                </select>
                            </td>
                            <td colspan="2">
                                <div>
                                    <label class="rcSmoothingType">
                                        <span i18n="receiverRcSmoothingType"></span>
                                    </label>
                                    <label class="rcSmoothingMode">
                                        <span i18n="receiverRcSmoothingMode"></span>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr class="rc-smoothing-channels">
                            <td>
                                <select name="rcSmoothingChannels-select">
                                    <option value="0">RP</option>
                                    <option value="1">RPY</option>
                                    <option value="2">RPYT</option>
                                    <option value="3">T</option>
                                    <option value="4">RPT</option>
                                </select>
                            </td>
                            <td colspan="2">
                                <div>
                                    <label>
                                        <span i18n="receiverRcSmoothingChannel"></span>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-setpoint-manual">
                            <td>
                                <select name="rcSmoothing-setpoint-manual-select">
                                    <option value="0" i18n="receiverRcSmoothingAuto"></option>
                                    <option value="1" i18n="receiverRcSmoothingManual"></option>
                                </select>
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcSetpointTypeSelect"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip" i18n_title="receiverRcSmoothingSetpointManual"></div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-setpoint-manual">
                            <td class="rcSmoothing-setpoint-cutoff"><input type="number" name="rcSmoothingSetpointHz-number" step="1" min="1" max="255"/></td>
                            <td class="rcSmoothing-setpoint-cutoff" colspan="2">
                                <div>
                                    <label>
                                        <span i18n="receiverRcSmoothingSetpointHz"></span>
                                    </label>
                                    <div class="helpicon cf_tip" i18n_title="rcSmoothingSetpointCutoffHelp"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-setpoint-type">
                            <td>
                                <select name="rcSmoothingSetpointType-select">
                                    <option value="0">PT1</option>
                                    <option value="1">BIQUAD</option>
                                </select>
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcSetpointType"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip" i18n_title="rcSmoothingSetpointTypeHelp"></div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-feedforward-manual">
                            <td>
                                <select name="rcSmoothing-feedforward-select">
                                    <option value="0" i18n="receiverRcSmoothingAuto"></option>
                                    <option value="1" i18n="receiverRcSmoothingManual"></option>
                                </select>
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcFeedforwardTypeSelect"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip" i18n_title="receiverRcSmoothingFeedforwardManual"></div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-feedforward-manual">
                            <td class="rcSmoothing-feedforward-cutoff"><input type="number" name="rcSmoothingFeedforwardCutoff-number" step="1" min="1" max="255"/></td>
                            <td colspan="2" class="rcSmoothing-feedforward-cutoff">
                                <div>
                                    <label>
                                        <span i18n="receiverRcSmoothingFeedforwardCutoff"></span>
                                    </label>
                                    <div class="helpicon cf_tip" i18n_title="rcSmoothingFeedforwardCutoffHelp"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-setpoint-type">
                            <td>
                                <select name="rcSmoothingFeedforwardType-select">
                                    <option value="0" i18n="receiverRcSmoothingFeedforwardTypeOff"></option>
                                    <option value="1">PT1</option>
                                    <option value="2">BIQUAD</option>
                                </select>
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcFeedforwardType"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip" i18n_title="rcSmoothingFeedforwardTypeHelp"></div>
                            </td>
                        </tr>
                        <tr class="rcSmoothing-auto-factor">
                            <td>
                                <input type="number" name="rcSmoothingAutoFactor-number" step="1" min="0" max="50">
                            </td>
                            <td>
                                <div>
                                    <label>
                                        <span i18n="receiverRcSmoothingAutoFactor"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="helpicon cf_tip receiverRcSmoothingAutoFactorHelp" i18n_title="receiverRcSmoothingAutoFactorHelp"></div>
                            </td>
                        </tr>
                        <tr class="rcInterpolation">
                            <td>
                                <select name="rcInterpolation-select">
                                    <option value="0" i18n="receiverRcInterpolationOff"></option>
                                    <option value="1" i18n="receiverRcInterpolationDefault"></option>
                                    <option value="2" i18n="receiverRcInterpolationAuto"></option>
                                    <option value="3" i18n="receiverRcInterpolationManual"></option>
                                </select>
                            </td>
                            <td>
                                <div class="rcInterpolation-label">
                                    <label>
                                        <span i18n="receiverRcInterpolation"></span>
                                    </label>
                                    <div class="helpicon cf_tip" i18n_title="receiverRcInterpolationHelp"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="rcInterpolation">
                            <td class="rc-interpolation-manual" colspan="1"><input type="number" name="rcInterpolationInterval-number" step="1" min="1" max="50" /></td>
                            <td class="rc-interpolation-manual" colspan="2">
                                <div>
                                    <label>
                                        <span i18n="receiverRcInterpolationInterval"></span>
                                    </label>
                                    <div class="helpicon cf_tip" i18n_title="receiverRcInterpolationIntervalHelp"></div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="gui_box grey">
            <div class="spacer">
                <div class="wrapper graphAndLabel">
                     <svg id="RX_plot">
                        <g class="grid x" transform="translate(40, 180)"></g>
                        <g class="grid y" transform="translate(40, 10)"></g>
                        <g class="data" transform="translate(41, 1)"></g>
                        <g class="axis x" transform="translate(40, 180)"></g>
                        <g class="axis y" transform="translate(40, 10)"></g>
                    </svg>
     
                    <div class="plot_control">
                        <div class="table">
                            <div class="sensor row">
                                <div class="left-cell receiver-button">
                                    <a class="reset_rate" href="#" i18n="receiverResetRefreshRate" i18n_title="receiverResetRefreshRateTitle"></a>
                                </div>
                                <div class="right-cell">
                                    <select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
                                        <option value="10">10 ms</option>
                                        <option value="20">20 ms</option>
                                        <option value="30">30 ms</option>
                                        <option value="40">40 ms</option>
                                        <option value="50" selected="selected">50 ms</option>
                                        <option value="100">100 ms</option>
                                        <option value="250">250 ms</option>
                                        <option value="500">500 ms</option>
                                        <option value="1000">1000 ms</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row-container">
                                <div class="row">
                                    <div class="left-cell">
                                        Roll [A]:
                                    </div>
                                    <div class="ch1 value right-cell">
                                        0
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="left-cell">
                                        Pitch [E]:
                                    </div>
                                    <div class="ch2 value right-cell">
                                        0
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="left-cell">
                                        Yaw [R]:
                                    </div>
                                    <div class="ch3 value right-cell">
                                        0
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="left-cell">
                                        Throttle [T]:
                                    </div>
                                    <div class="ch4 value right-cell">
                                        0
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear-both"></div>
    </div>
    <div class="content_toolbar">
        <div class="btn sticks_btn">
            <a class="sticks" href="#" i18n="receiverButtonSticks"></a>
        </div>
        <div class="btn bind_btn">
            <a class="bind" href="#" i18n="receiverButtonBind"></a>
        </div>
        <div class="btn refresh_btn">
            <a class="refresh" href="#" i18n="receiverButtonRefresh"></a>
        </div>
        <div class="btn update_btn">
            <a class="update" href="#" i18n="receiverButtonSave"></a>
        </div>
        <div class="btn save_btn">
            <a class="save" href="#" i18n="configurationButtonSave"></a>
        </div>
    </div>
</div>
